<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import Swiper from "components/common/swiper/Swiper.vue";
import SwiperItem from "components/common/swiper/SwiperItem.vue";

let isImageLoad = false;

const props = defineProps({
  banners: {
    type: Array as any,
    default() {
      return [];
    },
  },
});

const emit = defineEmits(["swiperImageLoad"]);

function imageLoad() {
  if (!isImageLoad) {
    emit("swiperImageLoad");
    isImageLoad = true;
  }
}
</script>

<template>
  <div class="home-swiper">
    <swiper>
      <swiper-item v-for="(item, index) in banners" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="" @load="imageLoad" />
        </a>
      </swiper-item>
    </swiper>
  </div>
</template>

<style lang="less">
</style>
